<template>
	<el-dialog title="应用设置" v-model="visible" :width="1200" destroy-on-close @closed="$emit('closed')">
		<el-tabs tab-position="top">
			<div v-for="(item, key) in column_list" :key="key">
				<el-text size="large" tag="b" style="font-weight: 600">{{ item.name }}</el-text>
				<el-checkbox-group v-model="checkedColumns">
					<template v-for="(column, index) in item.children" :key="index">
						<div class="menu-item">
							<el-checkbox :label="column.id" :disabled="column.children?.length > 0">
								{{ column.name }}
							</el-checkbox>
							<el-checkbox-group v-if="column.children?.length > 0" v-model="checkedColumns" class="nest-group">
								<el-checkbox v-for="(child, childIndex) in column.children" :key="childIndex" :label="child.id">
									{{ child.name }}
								</el-checkbox>
							</el-checkbox-group>
						</div>
					</template>
				</el-checkbox-group>
			</div>
		</el-tabs>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			isIndeterminate: true,
			visible: false,
			isSaveing: false,
			menu_ids: [],
			column_list: [],
			checkedColumns: [],
			type: 1
		}
	},
	mounted() {
		this.getColumn()
	},
	methods: {
		open(row) {
			this.visible = true;
			this.type = row.type
			this.checkedColumns = row.menu_ids
		},
		async submit() {
			this.isSaveing = true;
			// console.log(checkedKeys_dept)
			var res = await this.$API.common.setMenu.post({
				type: this.type,
				menu_id: this.checkedColumns,
			})
			if (res.code == 1) {
				this.isSaveing = false;
				this.visible = false;
				this.$message.success("操作成功")
				this.$emit('success')
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		async getColumn() {
			var res = await this.$API.common.allMenu.get()
			this.column_list = res.data
		},
	}
}
</script>

<style scoped>
.menu-item {
	display: flex;
	flex-direction: column;
}

.nest-group {
	padding-left: 24px;
	margin-top: 8px;
	margin-bottom: 8px;
}

.treeMain {
	height: 400px;
	overflow: auto;
	border: 1px solid #dcdfe6;
	margin-bottom: 10px;
}
</style>
